<template>
    <div class="system-add-role-container">
        <el-dialog title="导入信息" v-model="isShowDialog" width="769px">
            <el-form :model="ruleForm" size="small" label-width="120px">
                <el-row :gutter="35">

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="上传学籍信息">
                            <el-upload class="upload-demo"
                                       drag
                                       action="#"
                                       :on-remove="handleRemove"
                                       :before-remove="beforeRemove"
                                       :on-success="handleSuccess"
                                       :before-upload="beforeUpload"
                                       multiple>
                                <el-icon class="el-icon--upload">
                                    <upload-filled />
                                </el-icon>
                                <div class="el-upload__text">
                                    点击或将文件拖拽到这里上传
                                    <em>支持扩展名：.xls .xlsx</em>
                                </div>
                                <template #tip>
                                    <div class="el-upload__tip">
                                    </div>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { reactive, toRefs } from 'vue';
    import { UploadFilled } from '@element-plus/icons-vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import type { UploadProps, UploadUserFile } from 'element-plus'
    export default {
        name: 'systemAddRole',
        components: {
            UploadFilled,
        },
        emits: ['update'],
        setup(props:any,{emit}:any) {
            const state = reactive({
                isShowDialog: false,
                ruleForm: {
                },
            });
            // 打开弹窗
            const openDialog = () => {
                state.isShowDialog = true;
            };
            // 关闭弹窗
            const closeDialog = () => {
                state.isShowDialog = false;
            };
            // 取消
            const onCancel = () => {
                closeDialog();
            };
            // 新增
            const onSubmit = () => {
                closeDialog();
            };
            //上传
            const handleRemove: UploadProps['onRemove'] = (file:any, uploadFiles:any) => {
                console.log(file, uploadFiles)
            }
            const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
                return ElMessageBox.confirm(
                    `Cancel the transfert of ${uploadFile.name} ?`
                ).then(
                    () => true,
                    () => false
                )
            }
            const beforeUpload =  (file:any) => {
                debugger
                console.log(file);
                const fd= new FormData()
                fd.append('file', file)
                emit('update', fd)
            }
            return {
                openDialog,
                closeDialog,
                onCancel,
                onSubmit,
                handleRemove,
                beforeUpload,
                beforeRemove,
                ...toRefs(state),
            };
        },
    };
</script>

<style scoped lang="scss">
    .system-add-role-container {
        .menu-data-tree {
            border: var(--el-input-border, var(--el-border-base));
            border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
            padding: 5px;
        }
    }
</style>
